<template>
    <el-drawer :model-value="visible" :title="title" @close="closeDrawer" size="600px">
        <el-form label-position="left" class="detail-form" label-width="120px">
            <detail-form-items :detail="detail" :properties="properties" label-width="120px" />
        </el-form>
        <div class="dialog-footer">
            <el-button @click="closeDrawer" icon="el-icon-close">关闭</el-button>
            <el-button @click="edit" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button @click="del" type="danger" icon="el-icon-delete">删除</el-button>
        </div>
    </el-drawer>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
import DetailFormItems from '@/components/DetailFormItems.vue'
import { request } from '@/utils/request-utils'
import { copyProperties } from '@/utils/object-utils'

const properties = [
    { label: '接口ID', name: 'id' },
    { label: '业务系统编码', name: 'systemCode' },
    { label: '业务系统名称', name: 'systemName' },
    { label: '接口基础路径', name: 'baseUrl' },
    { label: '接口刷新路径', name: 'refreshUrl' },
    { label: '扩展信息', name: 'extInfo' },
    { label: '创建人', name: 'createUser' },
    { label: '修改人', name: 'updateUser' },
    { label: '创建时间', name: 'createTime' },
    { label: '更新时间', name: 'updateTime' },
]

export default defineComponent({
    components: { DetailFormItems },
    emits: ['edit', 'del'],
    props: {
        pk: {
            type: [Object, Map],
            required: false,
            default: () => undefined
        },
        visible: {
            type: Boolean,
            default: () => false
        },
    },
    setup(props, { emit }) {
        const { pk, visible } = toRefs(props)
        const title = ref<string>('')
        const detail = reactive<any>({})
        const closeDetailDrawer = inject<(newVal: boolean) => void>('closeDetailDrawer')
        const closeDrawer = () => {
            if (closeDetailDrawer) closeDetailDrawer(false)
        }

        const getDetail = (newVal: boolean) => {
            if (!newVal) return
            title.value = '接口业务系统详情'

            request({ url: '/api-system/detail', method: 'GET', params: pk.value }).then(response => {
                copyProperties(response, detail)
            })
        }

        watch(visible, getDetail)

        return {
            properties,
            title, detail,
            edit: () => {
                closeDrawer()
                emit("edit", detail)
            },
            del: () => emit("del"),
            closeDrawer
        }
    }
})
</script>

<style scoped>
</style>